<template>
  <div class="hash-display">
    <span 
      v-if="value" 
      class="hash" 
      :class="{ 'clickable': copyEnabled }" 
      @click="copyToClipboard" 
      :title="copyEnabled ? '点击复制' : ''"
    >
      {{ formattedHash }}
      <i v-if="copyEnabled" class="bi bi-clipboard ms-1"></i>
    </span>
    <span v-else class="text-muted">{{ placeholder }}</span>
    
    <!-- 复制成功提示 -->
    <span 
      v-if="copied" 
      class="copy-toast bg-success text-white" 
    >
      <i class="bi bi-check-circle-fill me-1"></i> 已复制!
    </span>
  </div>
</template>

<script>
export default {
  name: 'HashDisplay',
  props: {
    value: {
      type: [String, Array, Object],
      default: ''
    },
    shorten: {
      type: Boolean,
      default: true
    },
    prefixLength: {
      type: Number,
      default: 8
    },
    suffixLength: {
      type: Number,
      default: 6
    },
    placeholder: {
      type: String,
      default: '无哈希值'
    },
    copyEnabled: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      copied: false
    }
  },
  computed: {
    formattedHash() {
      if (!this.value) return '';
      
      // 处理哈希值
      let hashStr = '';
      
      if (Array.isArray(this.value)) {
        // 如果是字节数组，转换为16进制字符串
        hashStr = '0x' + Array.from(this.value).map(b => {
          const num = typeof b === 'number' ? b : parseInt(b);
          return num.toString(16).padStart(2, '0');
        }).join('');
      } else if (typeof this.value === 'string') {
        // 如果是字符串，确保有0x前缀
        hashStr = this.value.startsWith('0x') ? this.value : `0x${this.value}`;
      } else {
        return String(this.value);
      }
      
      // 缩短显示
      if (this.shorten && hashStr.length > this.prefixLength + this.suffixLength + 3) {
        return `${hashStr.substring(0, this.prefixLength)}...${hashStr.substring(hashStr.length - this.suffixLength)}`;
      }
      
      return hashStr;
    }
  },
  methods: {
    copyToClipboard() {
      if (!this.copyEnabled || !this.value) return;
      
      // 获取完整哈希值
      let fullHash = '';
      
      if (Array.isArray(this.value)) {
        fullHash = '0x' + Array.from(this.value).map(b => {
          const num = typeof b === 'number' ? b : parseInt(b);
          return num.toString(16).padStart(2, '0');
        }).join('');
      } else if (typeof this.value === 'string') {
        fullHash = this.value.startsWith('0x') ? this.value : `0x${this.value}`;
      } else {
        fullHash = String(this.value);
      }
      
      // 复制到剪贴板
      navigator.clipboard.writeText(fullHash)
        .then(() => {
          this.copied = true;
          setTimeout(() => {
            this.copied = false;
          }, 2000);
        })
        .catch(err => {
          console.error('复制失败:', err);
        });
    }
  }
}
</script>

<style scoped>
.hash-display {
  position: relative;
  display: inline-block;
}

.hash {
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.clickable:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.copy-toast {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  margin-bottom: 5px;
  animation: fadeInOut 2s ease;
  z-index: 10;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}
</style> 